<template>
  <div>
    <el-divider content-position="left">SKU动态属性设置</el-divider>
    <el-form ref="skuForm" :model="form" label-width="120px" :rules="validateRules">
      <el-row>
        <el-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="12"
          :xl="8"
          v-for="(item, index) in formElements"
          :key="index"
        >
          <el-form-item
            v-if="item.dataType === 0 && item.isRequired === 1"
            :label="item.attrName"
            :prop="item.id + '_' + item.attrCode"
            :rules="[
                  {type: 'string', required: true, message: '此项为必须项', trigger: 'blur'},
                  {type: 'string', min: 1, max: item.dataLength, message: '必须1-' + item.dataLength + '个字符', trigger: 'blur'}
                ]"
          >
            <el-input
              v-model="form[item.id + '_' + item.attrCode]"
              :placeholder="'请输入' + item.attrName"
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item
            v-else-if="item.dataType === 0"
            :label="item.attrName"
            :prop="item.id + '_' + item.attrCode"
            :rules="[
                  {type: 'string', min: 1, max: item.dataLength, message: '必须1-' + item.dataLength + '个字符', trigger: 'blur'}
                ]"
          >
            <el-input
              v-model="form[item.id + '_' + item.attrCode]"
              :placeholder="'请输入' + item.attrName"
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item
            v-else-if="item.dataType === 1 || item.dataType === 2"
            :label="item.attrName"
            :prop="item.id + '_' + item.attrCode"
            :rules="[
                  {type: 'integer', required: true, message: '此项为必须项', trigger: 'blur, change'}
                ]"
          >
            <el-input-number
              v-model="form[item.id + '_' + item.attrCode]"
              :placeholder="'请输入' + item.attrName"
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item
            v-else-if="item.dataType === 4 || item.dataType === 5"
            :label="item.attrName"
            :prop="item.id + '_' + item.attrCode"
            :rules="[
                  {type: 'number', required: true, message: '此项为必须项', trigger: 'blur, change'}
                ]"
          >
            <el-input-number
              v-model="form[item.id + '_' + item.attrCode]"
              :placeholder="'请输入' + item.attrName"
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { doPostJson } from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
export default {
  name: 'GoodsSkuDetailSetting',
  components: {},
  data() {
    return {
      categoryId: 0,
      skuId: null,
      formElements: [],
      form: {},
      validateRules: {},
      attrValues: [],
      isValid: false
    }
  },
  methods: {
    // 加载sku的所有属性和值
    loadSkuAllAttrVals() {
      this.formElements = []
      this.form = {}
      if (this.categoryId) {
        // 获取类目所有属性
        this.loadCategoryAttrs()
          .then(response => {
            if (response.data.total > 0) {
              let attrIds = []
              response.data.rows.forEach(row => {
                attrIds.push(row.attrId)
              })
              doPostJson(
                '/goods-attribute/admin/all-cond',
                { ids: attrIds },
                {}
              )
                .then(response => {
                  this.formElements = response.data.rows
                  if (this.skuId) {
                    let skuParams = {
                      goodsSkuId: this.skuId
                    }
                    // 获取已经设置值的属性
                    doPostJson(
                      '/goods-attribute-value/admin/all-cond',
                      { goodsSkuId: this.skuId },
                      {}
                    )
                      .then(response => {
                        this.formElements.forEach((formItem, index) => {
                          this.$set(
                            this.form,
                            formItem.id + '_' + formItem.attrCode,
                            undefined
                          )
                          response.data.rows.forEach((attrValue, index) => {
                            if (formItem.id === attrValue.attrId) {
                              let theAttributeVal = attrValue.attrValue
                              if (
                                formItem.dataType === 'Integer' ||
                                formItem.dataType === 'Long'
                              ) {
                                theAttributeVal = parseInt(theAttributeVal)
                              } else if (
                                formItem.dataType === 'Double' ||
                                formItem.dataType === 'BigDecimal'
                              ) {
                                theAttributeVal = parseFloat(theAttributeVal)
                              }
                              this.$set(
                                this.form,
                                formItem.id + '_' + formItem.attrCode,
                                theAttributeVal
                              )
                            }
                          })
                        })
                      })
                      .catch(error => {})
                  }
                })
                .catch(error => {})
            }
          })
          .catch(error => {})
      }
    },
    loadCategoryAttrs() {
      return new Promise((resolve, reject) => {
        let params = {
          categoryId: this.categoryId,
          sortColumn: 'attrOrder',
          sortOrder: 'asc'
        }
        doPostJson('/goods-category-attribute/admin/all-cond', params, {})
          .then(response => {
            resolve(response)
          })
          .catch(error => {
            reject(error)
          })
      })
    },
    getAttributeValues() {
      if (this.form.length <= 0) {
        this.$message.warning('没有需要保存的属性值')
        return
      }
      this.$refs['skuForm'].validate(valid => {
        if (valid) {
          this.isValid = true
          this.attrValues = []
          for (let key in this.form) {
            let attrValue = this.form[key]
            if (attrValue !== null) {
              let attrId = key.split('_')[0]
              let goodsAttribute = this.formElements.find(attr => {
                return (attr.id = attrId)
              })
              this.attrValues.push({
                attrId: attrId,
                attrValue: this.form[key],
                attrCode: goodsAttribute.attrCode,
                attrName: goodsAttribute.attrName,
                attrIsActive: 1
              })
            }
          }
        }
      })
    }
  },
  mounted() {}
}
</script>

<style lang="scss">
</style>
